<script lang="jsx" setup>
import dayjs from 'dayjs';
import { ref } from 'vue';

const props = defineProps({
  type: {
    type: String,
    default: () => null
  }
});

const column = ref([
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 50,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'codeInfo',
    dataIndex: 'codeInfo',
    title: '二维码信息',
    align: 'center',
    checked: true,
    width: 200,
    ellipsis: true
  },
  {
    key: 'printCount',
    dataIndex: 'printCount',
    title: '打印次数',
    width: 90,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'matName',
    dataIndex: 'matName',
    title: '物料名称',
    width: 140,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'supplierName',
    dataIndex: 'supplierName',
    title: '供应商名称',
    width: 140,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'specif',
    dataIndex: 'specif',
    title: '规格',
    align: 'center',
    width: 270,
    checked: true,
    ellipsis: true
  },
  {
    key: 'storageTime',
    dataIndex: 'storageTime',
    title: '入库时间',
    align: 'center',
    width: 150,
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (!record.storageTime) return '';
      return dayjs(record.storageTime).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'productionTime',
    dataIndex: 'productionTime',
    title: '生产日期',
    align: 'center',
    width: 150,
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (!record.productionTime) return '';
      return dayjs(record.productionTime).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'expirationTime',
    dataIndex: 'expirationTime',
    title: '过期日期',
    align: 'center',
    width: 150,
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (!record.expirationTime) return '';
      return dayjs(record.expirationTime).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (!record.createTime) return '';
      return dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss');
    }
  }
]);
const searchData = ref({
  type: props.type
});

const printCount = ref(null);

const selectList = ref([]);
function handleSelectChange(val) {
  selectList.value = val;
}

function handlePrint(cb) {
  // 校验打印次数是否为正整数的正则
  if (!printCount.value) {
    window.$message.error('请输入打印次数');
    return;
  }
  const reg = /^[1-9]\d*$/;
  if (!reg.test(printCount.value)) {
    window.$message.error('打印次数必须为大于0的正整数');
    return;
  }
  if (!selectList.value.length) {
    window.$message.error('请选择一条数据进行打印二维码');
    return;
  }
  if (selectList.value.length !== 1) {
    window.$message.error('只能选择一条数据进行打印二维码');
    return;
  }

  const data = {
    category: props.type === 'ink' ? 4 : 5,
    quantity: Number(printCount.value),
    codeInfo: selectList.value[0].codeInfo
  };
  cb && cb(data);
}

defineExpose({
  handlePrint
});
</script>

<template>
  <div class="print-list h-full min-h-500px w-full flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <ACard :title="null" :bordered="false" class="search-card card-wrapper">
      <AForm class="my-from" :label-col="{}" label-wrap>
        <AFormItem name="printCount" label="打印次数" :label-col="{}">
          <AInput
            v-model:value="printCount"
            placeholder="请输入打印次数"
            autocomplete="off"
            class="min-form-control w-220px"
          ></AInput>
        </AFormItem>
      </AForm>
    </ACard>
    <Table
      v-model:searchParams="searchData"
      :column="column"
      row-key="id"
      is-init-get-data
      :scroll="{ x: 'auto' }"
      url="/mes/ink/queryQRCodeList"
      :auto-generate-uuid="true"
      class="h-full w-full"
      row-selection-type="radio"
      @table-select-change="handleSelectChange"
    ></Table>
  </div>
</template>

<style lang="scss" scoped>
.my-from {
  :deep(.ant-form-item) {
    margin-bottom: 0;
  }
}
</style>
